<template>
	<view class="content_box">
		<navBar>
			<template @click="backPage()" slot='left'>
				<u-icon name="arrow-left" color="#fff"></u-icon>
			</template>
			<template class="centerText" slot='center'>
				<view class="" style="color: #fff;">
					快捷工具
				</view>
			</template>
		</navBar>
		<view class="subsection_box">
			<u-subsection :list="list" :current="curNow" @change="sectionChange"></u-subsection>
		</view>
		<view class="bind">
			<u--form labelPosition="left" ref="uForm" labelWidth='95' :model="formData" :rules="rules">
				<u-form-item :required='required' label="物料编码" prop="goods_no" borderBottom ref="item1">
					<u--input v-model="formData.goods_no" disabledColor="#ffffff" placeholder="请输入物料编码"
						border="none"></u--input>
					<u-icon @click="scanCode(1)" slot="right" name="scan" size="28" color="#2979ff"></u-icon>
				</u-form-item>
				<u-form-item :required='required' label="库位码" prop="rack_no" borderBottom ref="item1">
					<u--input v-model="formData.rack_no" disabledColor="#ffffff" placeholder="请输入库位码"
						border="none"></u--input>
					<u-icon @click="scanCode(2)" slot="right" name="scan" size="28" color="#2979ff"></u-icon>
				</u-form-item>
				<u-form-item v-if="curNow == 0" label="是否有PTL灯" borderBottom>
					<u-radio-group v-model="radioValue" placement="row">
						<u-radio v-for="item in radioList" :customStyle="{marginLeft: '8px'}" activeColor="#2979ff"
							:name="item.id" :label="item.lable" :key="item.id"></u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item v-if="curNow == 0 && radioValue == 1 " :required='required' label="PTL灯编号" prop="plt_id"
					borderBottom ref="item1">
					<u--input v-model="formData.plt_id" disabledColor="#ffffff" placeholder="请输入PTL编号"
						border="none"></u--input>
					<!-- <u-icon slot="right" name="scan" size="28" color="#2979ff"></u-icon> -->
				</u-form-item>
			</u--form>
			<view v-if="curNow == 1" class="tips">
				提示:解绑时物料编码和库位码任填一项即可
			</view>
			<view class="btn_box">
				<view @click="submit()" class="btn">
					{{curNow == 0? '绑定' : '解绑'}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/navBar.vue'
	import {
		goodsBindApi,
		goodsUnbindApi
	} from '@/api/receiveAndBorrow.js'
	export default {
		data() {
			return {
				radioValue: 1,
				list: ['物料绑定', '库位解绑'],
				radioList: [{
						id: 1,
						lable: '是'
					},
					{
						id: 2,
						lable: '否'
					}
				],
				curNow: 0,
				formData: {
					goods_no: '',
					rack_no: '',
					plt_id: '',
					ware_id: this.$store.state.user.stashInfo.ware_id
				},
				required: true,
				rules: {
					goods_no: {
						required: true,
						message: '请输入货物代码',
						trigger: ['blur']
					},
					rack_no: {
						required: true,
						message: '请输入库位码',
						trigger: ['blur']
					},
					plt_id: {
						required: true,
						message: '请输入PLT编号',
						trigger: ['blur']
					},
				}
			}
		},
		components: {
			navBar
		},
		methods: {
			backPage() {
				uni.navigateBack()
			},
			async sectionChange(index) {
				this.curNow = index;
				this.$refs.uForm.clearValidate(); //清空校验结果
				this.formData = {
					goods_no: '',
					rack_no: '',
					plt_id: '',
					ware_id: this.$store.state.user.stashInfo.ware_id
				}
				if (this.curNow == 1) {
					this.required = false
					this.rules = {
						goods_no: {},
						rack_no: {},
					}
					this.formData = {
						goods_no: '',
						rack_no: '',
						ware_id: this.$store.state.user.stashInfo.ware_id
					}
				} else {
					this.required = true
					this.rules = {
						goods_no: {
							required: true,
							message: '请输入货物代码',
							trigger: ['blur']
						},
						rack_no: {
							required: true,
							message: '请输入库位码',
							trigger: ['blur']
						},
						plt_id: {
							required: true,
							message: '请输入PLT编号',
							trigger: ['blur']
						},
					}
					this.formData = {
						goods_no: '',
						rack_no: '',
						plt_id: '',
						ware_id: this.$store.state.user.stashInfo.ware_id
					}
				}
			},
			//扫码
			scanCode(type) {
				uni.showLoading({
					mask: true
				})
				const that = this
				uni.scanCode({
					scanType: ['barCode'],
					success: async (e) => {
						uni.hideLoading()
						if (type == 1) {
							this.formData.goods_no = e.result
						} else {
							this.formData.rack_no = e.result
						}
					},
					fail(err) {
						uni.$u.toast('扫描失败请重新扫码')
					}
				});
			},
			async submit() {
				await this.$refs.uForm.validate()
				if (this.curNow == 0) {
					this.goodsBind()
				} else {
					this.goodsUnbind()
				}
			},
			//货物绑定
			async goodsBind() {
				await goodsBindApi(this.formData)
				uni.$u.toast('绑定成功')
				this.formData = {
					goods_no: '',
					rack_no: '',
					plt_id: '',
					ware_id: this.$store.state.user.stashInfo.ware_id
				}
			},
			//解绑
			async goodsUnbind() {
				if (this.formData.goods_no || this.formData.rack_no) {
					await goodsUnbindApi(this.formData)
					uni.$u.toast('解绑成功')
					this.formData = {
						goods_no: '',
						rack_no: '',
						plt_id: '',
						ware_id: this.$store.state.user.stashInfo.ware_id,
					}
				}

			}
		}
	}
</script>

<style lang="scss">
	.content_box {
		.subsection_box {
			::v-deep .u-subsection--button {
				height: 80rpx;
			}
		}

		.bind {
			padding: 30rpx 20rpx;

			::v-deep .u-form-item__body__left {
				margin-left: 20rpx;
			}

			::v-deep .u-upload__wrap__preview {
				width: 110rpx;
				height: 110rpx;
			}
		}

		.btn_box {
			display: flex;
			justify-content: center;
			margin-top: 100rpx;

			.btn {
				width: 300rpx;
				height: 70rpx;
				background-color: #39cccc;
				color: #fff;
				text-align: center;
				line-height: 70rpx;
				border-radius: 35rpx;

			}
		}

		.tips {
			margin: 20rpx 0;
			text-align: center;
			font-size: 25rpx;
			color: #ff0000;
		}

	}
</style>